/* eslint-disable @typescript-eslint/no-explicit-any */
// 导入React核心库和Hooks
import React, { useState, useEffect, useRef, useCallback } from 'react';
// 导入Ant Design组件库
import { Input, Button, Avatar, Card, List, Typography, Space, Divider, Badge, Tooltip, message, Modal } from 'antd';
// 导入Ant Design图标
import { 
  SendOutlined, 
  UserOutlined, 
  CustomerServiceOutlined, 
  AudioOutlined, 
  StopOutlined,
  SoundOutlined,
  LoadingOutlined,
  SmileOutlined,
  PictureOutlined,
  DeleteOutlined
} from '@ant-design/icons';
// 导入样式文件
import styles from './style.module.css';

// 解构Ant Design组件
const { TextArea } = Input;
const { Text, Title } = Typography;

// 简化的Web Speech API类型定义
type SpeechRecognitionType = any;

// 表情数据 - 包含64个常用表情符号
const emojis = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
  '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
  '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
  '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
  '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
  '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠',
  '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨',
  '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥',
  '😶', '😐', '😑', '😯', '😦', '😧', '😮', '😲',
  '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢',
  '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '💩',
  '👻', '💀', '☠️', '👽', '👾', '🤖', '😺', '😸'
];

/**
 * 消息接口定义
 */
interface Message {
  id: string;                    // 消息唯一标识
  content: string;               // 消息内容
  sender: 'customer' | 'service'; // 发送者类型：客户或客服
  senderName: string;            // 发送者名称
  timestamp: Date;               // 消息时间戳
  avatar?: string;               // 头像URL（可选）
  isTyping?: boolean;            // 是否正在打字机效果
  audioUrl?: string;             // 音频消息的URL
  isAudio?: boolean;             // 是否为音频消息
  imageUrl?: string;             // 图片消息的URL
  isImage?: boolean;             // 是否为图片消息
}

/**
 * 语音识别配置接口
 */
interface VoiceConfig {
  provider: 'web' | 'xunfei' | 'baidu'; // 语音识别提供商
  apiKey?: string;                       // API密钥
  apiSecret?: string;                    // API密钥
  appId?: string;                        // 应用ID
}

/**
 * 语音合成配置接口
 */
interface TTSConfig {
  provider: 'web' | 'xunfei' | 'baidu'; // 语音合成提供商
  voice?: string;                        // 语音类型
  speed?: number;                        // 语速
  pitch?: number;                        // 音调
}

/**
 * 组件属性接口定义
 */
interface MyCustomerProps {
  serverUrl?: string;            // 服务器URL
  customerId?: string;           // 客户ID
  customerName?: string;         // 客户名称
  isCustomerService?: boolean;   // 是否为客服模式
  serviceId?: string;            // 客服ID
  serviceName?: string;          // 客服名称
  voiceConfig?: VoiceConfig;     // 语音识别配置
  ttsConfig?: TTSConfig;         // 语音合成配置
  enableVoice?: boolean;         // 是否启用语音功能
}

/**
 * 客户聊天组件 - 支持文本、语音、表情等多种交互方式
 */
const MyCustomer: React.FC<MyCustomerProps> = ({
  serverUrl = 'http://localhost:5000',           // 默认服务器地址
  customerId = `customer_${Date.now()}`,         // 默认客户ID（时间戳生成）
  customerName = '访客',                         // 默认客户名称
  isCustomerService = false,                     // 默认非客服模式
  serviceName = '客服',                          // 默认客服名称
  voiceConfig = { provider: 'web' },             // 默认使用Web语音API
  ttsConfig = { provider: 'web', voice: 'zh-CN', speed: 1, pitch: 1 }, // 默认语音合成配置
  enableVoice = true                             // 默认启用语音功能
}) => {
  //基础状态管理------------------
  const [messages, setMessages] = useState<Message[]>([]);        // 存储消息列表
  const [inputValue, setInputValue] = useState('');               // 输入框内容
  const [loading, setLoading] = useState(false);                  // 发送状态
  const [online] = useState(true);                                // 在线状态
  const messagesEndRef = useRef<HTMLDivElement>(null);            // 消息列表底部引用
  const [currentTime] = useState(0);                              // 当前时间（用于消息同步）
  
  //语音相关状态------------------
  const [isPlaying, setIsPlaying] = useState(false);             // 是否正在播放语音
  // const [recognition, setRecognition] = useState<SpeechRecognitionType | null>(null); // 语音识别实例
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);  // 音频录制器
  const [isTyping, setIsTyping] = useState(false);               // 是否正在打字机效果
  const [typingMessageId, setTypingMessageId] = useState<string>(''); // 正在打字的消息ID
  const [typingContent, setTypingContent] = useState('');        // 打字机效果的内容
  const [typingIndex, setTypingIndex] = useState(0);             // 打字机效果当前索引
  const [typingSpeed] = useState(50);                            // 打字机效果速度(ms)
  const [isRecordingAudio, setIsRecordingAudio] = useState(false); // 是否正在录制音频
  const [showEmojiPicker, setShowEmojiPicker] = useState(false); // 是否显示表情选择器
  const [selectedImages, setSelectedImages] = useState<File[]>([]); // 选中的图片文件
  const [imagePreviewVisible, setImagePreviewVisible] = useState(false); // 图片预览是否可见
  const [imagePreviewUrl, setImagePreviewUrl] = useState(''); // 图片预览URL
  
  //引用管理 -------------------
  const recognitionRef = useRef<SpeechRecognitionType | null>(null); // 语音识别引用
  const synthesisRef = useRef<SpeechSynthesis | null>(null);     // 语音合成引用
  const audioChunksRef = useRef<Blob[]>([]);                     // 音频数据块引用
  const emojiPickerRef = useRef<HTMLDivElement>(null);           // 表情选择器引用
  const fileInputRef = useRef<HTMLInputElement>(null);           // 文件输入引用

//  自动滚动到消息列表底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

// 监听消息变化，自动滚动到底部
  useEffect(() => {
    scrollToBottom();
  }, [messages]);

// 点击外部区域关闭表情选择器
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target as Node)) {
        setShowEmojiPicker(false);
      }
    };

    if (showEmojiPicker) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showEmojiPicker]);

//  初始化默认欢迎消息
  useEffect(() => {
    // 设置默认欢迎消息
    const defaultMessage: Message = {
      id: '1',
      content: '您好，很高兴为您提供服务！',
      sender: 'service',
      senderName: serviceName,
      timestamp: new Date(),
    };
    setMessages([defaultMessage]);
  }, [serviceName]);

// 初始化语音识别和语音合成功能
  useEffect(() => {
    if (!enableVoice) return;
    
    // 初始化Web Speech API
    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      const recognition = new SpeechRecognition();
      
      // 配置语音识别参数
      recognition.continuous = true;      // 持续识别
      recognition.interimResults = true;  // 返回中间结果
      recognition.lang = 'zh-CN';         // 设置语言为中文
      
      // 语音识别开始事件
      recognition.onstart = () => {
        console.log('语音识别开始');
      };
      
      // 语音识别结果事件
      recognition.onresult = (event: any) => {
        let finalTranscript = '';    // 最终识别结果
        let interimTranscript = '';  // 中间识别结果
        
        // 遍历所有识别结果
        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcript = event.results[i][0].transcript;
          if (event.results[i].isFinal) {
            finalTranscript += transcript;
          } else {
            interimTranscript += transcript;
          }
        }
        
        // 实时显示中间识别结果
        if (interimTranscript) {
          setInputValue(interimTranscript);
        }
        
        // 处理最终识别结果
        if (finalTranscript) {
          setInputValue(finalTranscript);
          // 延迟1秒后自动发送消息
          setTimeout(() => {
            sendMessage();
          }, 1000);
        }
      };
      
      // 语音识别错误事件
      recognition.onerror = (event: any) => {
        console.error('语音识别错误:', event.error);
        message.error('语音识别失败，请重试');
      };
      
      // 语音识别结束事件
      recognition.onend = () => {
        console.log('语音识别结束');
      };
      
      recognitionRef.current = recognition;
    }
    
    // 初始化语音合成
    if ('speechSynthesis' in window) {
      synthesisRef.current = window.speechSynthesis;
    }
  }, [enableVoice]);

// 获取历史消息
  useEffect(() => {
    const fetchHistoryMessages = async () => {
      try {
        // 构建视频ID（用于消息存储）
        const videoId = `customer_chat_${customerId}`;
        // 从服务器获取历史消息
        const response = await fetch(`${serverUrl}/danmaku/${videoId}?currentTime=${currentTime}`);
        const data = await response.json();
        
        // 如果存在历史消息，转换为组件消息格式
        if (Array.isArray(data) && data.length > 0) {
          const historyMessages: Message[] = data.map((item: { id: string; content: string; senderId: string; timestamp: string }) => ({
            id: item.id,
            content: item.content,
            // 根据发送者ID判断消息类型
            sender: item.senderId === 'system' ? 'service' : 
                   item.senderId === customerId ? 'customer' : 'service',
            // 根据发送者ID设置发送者名称
            senderName: item.senderId === 'system' ? serviceName :
                       item.senderId === customerId ? customerName : serviceName,
            timestamp: new Date(item.timestamp),
            avatar: item.senderId === 'system' ? undefined : undefined
          }));
          setMessages(historyMessages);
        }
      } catch (error) {
        console.error('获取历史消息失败:', error);
        // 如果获取失败，保持默认欢迎消息
      }
    };

    fetchHistoryMessages();
  }, [serverUrl, customerId, currentTime, customerName, serviceName]);



//  开始音频录制
  const startAudioRecording = useCallback(async () => {
    try {
      // 获取麦克风权限并创建音频流
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorder = new MediaRecorder(stream);
      audioChunksRef.current = []; // 清空之前的音频数据
      
      // 监听音频数据可用事件
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          audioChunksRef.current.push(event.data);
        }
      };
      
      // 监听录制停止事件
      mediaRecorder.onstop = () => {
        // 将音频数据块合并为Blob对象
        const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' });
        setIsRecordingAudio(false);
        
        // 自动发送音频消息
        sendAudioMessage(audioBlob);
        
        // 停止所有音频轨道，释放麦克风
        stream.getTracks().forEach(track => track.stop());
      };
      
      // 开始录制
      mediaRecorder.start();
      setMediaRecorder(mediaRecorder);
      setIsRecordingAudio(true);
      message.success('开始录音，点击停止按钮结束录音');
    } catch (error) {
      console.error('录音失败:', error);
      message.error('无法访问麦克风，请检查权限设置');
    }
  }, []);

// 停止音频录制
  const stopAudioRecording = useCallback(() => {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
      mediaRecorder.stop();
    }
  }, [mediaRecorder]);

  
  //  @param audioBlob 音频数据
  //  发送音频消息到服务器
  const sendAudioMessage = async (audioBlob: Blob) => {
    try {
      // 创建音频消息对象
      const audioMessage: Message = {
        id: Date.now().toString(),
        content: '[语音消息]',
        sender: 'customer',
        senderName: customerName,
        timestamp: new Date(),
        audioUrl: URL.createObjectURL(audioBlob), // 创建本地音频URL
        isAudio: true,
      };

      // 立即添加到消息列表
      setMessages(prev => [...prev, audioMessage]);

      // 准备发送到服务器的数据
      const formData = new FormData();
      formData.append('audio', audioBlob, 'voice_message.wav');
      formData.append('videoId', `customer_chat_${customerId}`);
      formData.append('senderId', customerId);
      formData.append('time', currentTime.toString());

      // 发送音频到服务器
      const response = await fetch(`${serverUrl}/upload-audio`, {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        const data = await response.json();
        // 处理服务器回复
        if (data.reply) {
          const replyMessage: Message = {
            id: (Date.now() + 1).toString(),
            content: data.reply,
            sender: 'service',
            senderName: serviceName,
            timestamp: new Date(),
          };
          setMessages(prev => [...prev, replyMessage]);
          
          // 启动打字机效果
          typewriterEffect(replyMessage.id, data.reply);
          
          // 语音合成播放回复
          if (enableVoice) {
            speakText(data.reply);
          }
        }
      }
    } catch (error) {
      console.error('发送音频消息失败:', error);
      message.error('发送音频消息失败');
    }
  };

  /**
   * 语音合成函数 - 将文本转换为语音播放
   * @param text 要播放的文本内容
   */
  const speakText = useCallback((text: string) => {
    if (synthesisRef.current) {
      // 创建语音合成实例
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';                    // 设置语言为中文
      utterance.rate = ttsConfig.speed || 1;       // 设置语速
      utterance.pitch = ttsConfig.pitch || 1;      // 设置音调
      
      // 监听播放状态
      utterance.onstart = () => setIsPlaying(true);
      utterance.onend = () => setIsPlaying(false);
      utterance.onerror = () => setIsPlaying(false);
      
      // 开始播放
      synthesisRef.current.speak(utterance);
    }
  }, [ttsConfig.speed, ttsConfig.pitch]);

  /**
   * 打字机效果 - 逐字显示文本内容
   * @param messageId 消息ID
   * @param content 要显示的文本内容
   */
  const typewriterEffect = useCallback((messageId: string, content: string) => {
    setIsTyping(true);
    setTypingMessageId(messageId);
    setTypingContent(content);
    setTypingIndex(0);
    
    // 创建定时器，逐字显示文本
    const timer = setInterval(() => {
      setTypingIndex(prev => {
        if (prev >= content.length) {
          // 显示完成，清理状态
          clearInterval(timer);
          setIsTyping(false);
          setTypingMessageId('');
          setTypingContent('');
          return prev;
        }
        return prev + 1;
      });
    }, typingSpeed);
    
    return () => clearInterval(timer);
  }, [typingSpeed]);

// 发送文本消息
  const sendMessage = async () => {
    // 验证输入内容
    if (!inputValue.trim() || loading) return;

    const messageContent = inputValue.trim();
    setInputValue(''); // 清空输入框
    setLoading(true);  // 设置加载状态

    // 立即添加用户消息到界面
    const newMessage: Message = {
      id: Date.now().toString(),
      content: messageContent,
      sender: 'customer',
      senderName: customerName,
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, newMessage]);

    try {
      // 构建视频ID（用于消息存储）
      const videoId = `customer_chat_${customerId}`;
      // 发送消息到服务器
      const response = await fetch(`${serverUrl}/danmaku`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          videoId,
          content: messageContent,
          time: currentTime,
          senderId: customerId,
          color: '#1890ff',
          type: 0
        }),
      });

      if (response.ok) {
        const data = await response.json();
        // 如果有自动回复，添加到消息列表
        if (data.isAutoReply) {
          const autoReplyMessage: Message = {
            id: (Date.now() + 1).toString(),
            content: data.content,
            sender: 'service',
            senderName: serviceName,
            timestamp: new Date(),
          };
          setMessages(prev => [...prev, autoReplyMessage]);
        } else {
          // 如果没有自动回复，使用智能回复
          setTimeout(() => {
            const smartReply = generateSmartReply(messageContent);
            const autoReplyMessage: Message = {
              id: (Date.now() + 1).toString(),
              content: smartReply,
              sender: 'service',
              senderName: serviceName,
              timestamp: new Date(),
            };
            setMessages(prev => [...prev, autoReplyMessage]);
            
            // 启动打字机效果
            typewriterEffect(autoReplyMessage.id, smartReply);
            
            // 语音合成（可选）
            if (enableVoice) {
              speakText(smartReply);
            }
          }, 1000);
        }
      }
    } catch (error) {
      console.error('发送消息失败:', error);
      // 网络错误时使用智能回复
      setTimeout(() => {
        const smartReply = generateSmartReply(messageContent);
        const autoReply: Message = {
          id: (Date.now() + 1).toString(),
          content: smartReply,
          sender: 'service',
          senderName: serviceName,
          timestamp: new Date(),
        };
        setMessages(prev => [...prev, autoReply]);
      }, 1000);
    } finally {
      setLoading(false); // 清除加载状态
    }
  };

  // 处理回车发送
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  // 处理表情选择
  const handleEmojiSelect = (emoji: string) => {
    setInputValue(prev => prev + emoji);
    setShowEmojiPicker(false);
  };

  // 表情选择器组件
  const EmojiPicker = () => {
    if (!showEmojiPicker) return null;

    return (
      <div ref={emojiPickerRef} className={styles.emojiPicker}>
        <div className={styles.emojiGrid}>
          {emojis.map((emoji, index) => (
            <button
              key={index}
              className={styles.emojiButton}
              onClick={() => handleEmojiSelect(emoji)}
              title={emoji}
            >
              {emoji}
            </button>
          ))}
        </div>
      </div>
    );
  };

  /**
   * 智能客服回复函数 - 基于关键词匹配生成回复
   * @param userMessage 用户消息内容
   * @returns 智能回复内容
   */
  const generateSmartReply = (userMessage: string): string => {
    const message = userMessage.toLowerCase();
    
    // 问候类问题
    if (message.includes('你好') || message.includes('您好') || message.includes('hi') || message.includes('hello')) {
      return '您好！很高兴为您服务，请问有什么可以帮助您的吗？';
    }

    if (message.includes('天气') || message.includes('预报') || message.includes('weather') || message.includes('下雨')) {
      return '根据墨迹天气消息，北京今天的天气是多云，最低温度 24℃，最高温度 33℃，空气质量优，pm2.5 指数 24，湿度 78，东北风 2 级。';
    }
    
    // 产品相关
    if (message.includes('产品') || message.includes('商品') || message.includes('服务')) {
      return '我们提供多种优质产品和服务，包括技术支持、产品咨询、售后服务等。您想了解哪个方面的信息呢？';
    }
    
    // 价格相关
    if (message.includes('价格') || message.includes('费用') || message.includes('多少钱') || message.includes('收费')) {
      return '我们的价格根据具体服务内容而定，建议您详细说明需求，我可以为您提供准确的报价信息。';
    }
    
    // 技术支持
    if (message.includes('技术') || message.includes('问题') || message.includes('故障') || message.includes('bug')) {
      return '对于技术问题，我们的技术团队会尽快为您解决。请详细描述您遇到的问题，我会转交给相关技术人员。';
    }
    
    // 售后服务
    if (message.includes('售后') || message.includes('维修') || message.includes('退换') || message.includes('保修')) {
      return '我们提供完善的售后服务，包括保修、维修、退换货等服务。请提供您的订单信息，我会为您安排相应的服务。';
    }
    
    // 联系方式
    if (message.includes('联系') || message.includes('电话') || message.includes('邮箱') || message.includes('地址')) {
      return '您可以通过以下方式联系我们：\n电话：400-123-4567\n邮箱：service@company.com\n地址：北京市朝阳区xxx大厦';
    }
    
    // 工作时间
    if (message.includes('时间') || message.includes('上班') || message.includes('下班') || message.includes('营业')) {
      return '我们的工作时间是周一至周五 9:00-18:00，周六 9:00-17:00，周日休息。如有紧急问题，请拨打24小时服务热线。';
    }
    
    // 订单相关
    if (message.includes('订单') || message.includes('购买') || message.includes('付款') || message.includes('发货')) {
      return '关于订单问题，请提供您的订单号，我可以为您查询订单状态、发货信息等详细信息。';
    }
    
    // 投诉建议
    if (message.includes('投诉') || message.includes('建议') || message.includes('意见') || message.includes('不满')) {
      return '感谢您的反馈！我们会认真处理您的投诉或建议。请详细说明情况，我会转交给相关部门处理。';
    }
    
    // 感谢
    if (message.includes('谢谢') || message.includes('感谢') || message.includes('thank')) {
      return '不客气！很高兴能帮助到您。如果还有其他问题，随时可以咨询我。';
    }
    
    // 再见
    if (message.includes('再见') || message.includes('拜拜') || message.includes('goodbye') || message.includes('bye')) {
      return '再见！感谢您的咨询，祝您生活愉快！如有需要随时联系我们。';
    }
    
    // 询问类问题
    if (message.includes('怎么') || message.includes('如何') || message.includes('怎样') || message.includes('什么')) {
      return '这是一个很好的问题！让我为您详细解答。请稍等，我正在为您查询相关信息...';
    }
    
    // 确认类问题
    if (message.includes('是吗') || message.includes('真的吗') || message.includes('确定吗') || message.includes('可以吗')) {
      return '是的，我确认这个信息是正确的。如果您还有其他疑问，请随时告诉我。';
    }
    
    // 默认回复
    return '感谢您的咨询！我理解您的问题，让我为您提供专业的解答。请稍等，我正在为您查询相关信息...';
  };

  // 快速回复选项 - 客服可使用的预设回复
  const quickReplies = [
    '您好，请问有什么可以帮助您的？',
    '好的，我明白了',
    '请稍等，我为您查询一下',
    '还有其他问题吗？',
    '感谢您的咨询！'
  ];

  /**
   * 处理快速回复 - 仅客服模式可用
   * @param reply 快速回复内容
   */
  const handleQuickReply = (reply: string) => {
    if (isCustomerService) {
      const serviceMessage: Message = {
        id: Date.now().toString(),
        content: reply,
        sender: 'service',
        senderName: serviceName,
        timestamp: new Date(),
      };
      setMessages(prev => [...prev, serviceMessage]);
    }
  };

  /**
   * 处理图片文件选择
   * @param event 文件选择事件
   */
  const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      const imageFiles = Array.from(files).filter(file => 
        file.type.startsWith('image/')
      );
      
      if (imageFiles.length > 0) {
        setSelectedImages(prev => [...prev, ...imageFiles]);
        message.success(`已选择 ${imageFiles.length} 张图片`);
      } else {
        message.error('请选择有效的图片文件');
      }
    }
    // 清空input值，允许重复选择同一文件
    if (event.target) {
      event.target.value = '';
    }
  };

  /**
   * 移除选中的图片
   * @param index 图片索引
   */
  const removeSelectedImage = (index: number) => {
    setSelectedImages(prev => prev.filter((_, i) => i !== index));
  };

  /**
   * 预览图片
   * @param url 图片URL
   */
  const previewImage = (url: string) => {
    setImagePreviewUrl(url);
    setImagePreviewVisible(true);
  };

  /**
   * 发送图片消息
   * @param imageFile 图片文件
   */
  const sendImageMessage = async (imageFile: File) => {
    try {
      // 创建图片消息对象
      const imageUrl = URL.createObjectURL(imageFile);
      const imageMessage: Message = {
        id: Date.now().toString(),
        content: '[图片消息]',
        sender: 'customer',
        senderName: customerName,
        timestamp: new Date(),
        imageUrl: imageUrl,
        isImage: true,
      };

      // 立即添加到消息列表
      setMessages(prev => [...prev, imageMessage]);

      // 准备发送到服务器的数据
      const formData = new FormData();
      formData.append('image', imageFile);
      formData.append('videoId', `customer_chat_${customerId}`);
      formData.append('senderId', customerId);
      formData.append('time', currentTime.toString());

      // 发送图片到服务器
      const response = await fetch(`${serverUrl}/upload-image`, {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        const data = await response.json();
        // 处理服务器回复
        if (data.reply) {
          const replyMessage: Message = {
            id: (Date.now() + 1).toString(),
            content: data.reply,
            sender: 'service',
            senderName: serviceName,
            timestamp: new Date(),
          };
          setMessages(prev => [...prev, replyMessage]);
          
          // 启动打字机效果
          typewriterEffect(replyMessage.id, data.reply);
          
          // 语音合成播放回复
          if (enableVoice) {
            speakText(data.reply);
          }
        }
      }
    } catch (error) {
      console.error('发送图片消息失败:', error);
      message.error('发送图片消息失败');
    }
  };

  /**
   * 发送所有选中的图片
   */
  const sendAllImages = async () => {
    if (selectedImages.length === 0) {
      message.warning('请先选择图片');
      return;
    }

    for (const imageFile of selectedImages) {
      await sendImageMessage(imageFile);
    }
    
    // 清空选中的图片
    setSelectedImages([]);
    message.success(`成功发送 ${selectedImages.length} 张图片`);
  };

  return (
    <div className={styles.customerChatContainer}>
      {/* ==================== 聊天头部 ==================== */}
      {/* <Card className={styles.chatHeader}>
        <Space>
          在线状态指示器
          <Badge status={online ? 'success' : 'default'} />
          头像
          <Avatar 
            icon={isCustomerService ? <CustomerServiceOutlined /> : <UserOutlined />}
            className={styles.headerAvatar}
          />
          标题和状态信息
          <div>
            <Title level={5} style={{ margin: 0 }}>
              {isCustomerService ? '客服工作台' : '在线客服'}
            </Title>
            <Text type="secondary" style={{ fontSize: '12px' }}>
              {online ? '在线' : '离线'} • {isCustomerService ? '服务中' : '等待中'}
            </Text>
          </div>
        </Space>
      </Card> */}

      {/*消息列表区域 */}
      <div className={styles.messagesContainer}>
        <List
          dataSource={messages}
          renderItem={(message) => (
            <List.Item className={styles.messageItem}>
              <div className={`${styles.messageWrapper} ${
                message.sender === 'customer' ? styles.customerMessage : styles.serviceMessage
              }`}>
                <div className={styles.messageContent}>
                  {/* 消息头部 - 头像、发送者名称、时间 */}
                  <div className={styles.messageHeader}>
                    <Avatar 
                      size="small"
                      icon={message.sender === 'customer' ? <UserOutlined /> : <CustomerServiceOutlined />}
                      className={styles.messageAvatar}
                    />
                    <Text strong className={styles.senderName}>
                      {message.senderName}
                    </Text>
                    <Text type="secondary" className={styles.timestamp}>
                      {message.timestamp.toLocaleTimeString()}
                    </Text>
                  </div>
                  {/* 消息内容气泡 */}
                  <div className={styles.messageBubble}>
                    {/* 图片消息显示 */}
                    {message.isImage && message.imageUrl ? (
                      <div className={styles.imageMessage}>
                        <img 
                          src={message.imageUrl} 
                          alt="图片消息" 
                          className={styles.messageImage}
                          onClick={() => previewImage(message.imageUrl!)}
                          style={{ cursor: 'pointer' }}
                        />
                      </div>
                    ) : message.isAudio && message.audioUrl ? (
                      /* 音频消息显示 */
                      <div className={styles.audioMessage}>
                        <audio controls src={message.audioUrl} className={styles.audioPlayer}>
                          您的浏览器不支持音频播放
                        </audio>
                      </div>
                    ) : (
                      <>
                        {/* 打字机效果显示 */}
                        {message.id === typingMessageId && isTyping 
                          ? typingContent.substring(0, typingIndex)
                          : message.content
                        }
                        {/* 打字机光标 */}
                        {message.id === typingMessageId && isTyping && (
                          <span className={styles.typingCursor}>|</span>
                        )}
                      </>
                    )}
                  </div>
                  {/* 语音播放按钮（仅客服消息显示） */}
                  {message.sender === 'service' && enableVoice && !message.isAudio && (
                    <Tooltip title={isPlaying ? "正在播放" : "播放语音"}>
                      <Button
                        type="text"
                        size="small"
                        icon={isPlaying ? <LoadingOutlined /> : <SoundOutlined />}
                        onClick={() => speakText(message.content)}
                        disabled={isPlaying}
                        className={styles.voiceButton}
                      />
                    </Tooltip>
                  )}
                </div>
              </div>
            </List.Item>
          )}
        />
        {/* 自动滚动定位点 */}
        <div ref={messagesEndRef} />
      </div>

      {/*快速回复区域（仅客服可见）*/}
      {isCustomerService && (
        <div className={styles.quickRepliesContainer}>
          <Divider orientation="left">快速回复</Divider>
          <Space wrap>
            {quickReplies.map((reply, index) => (
              <Button
                key={index}
                size="small"
                type="dashed"
                onClick={() => handleQuickReply(reply)}
              >
                {reply}
              </Button>
            ))}
          </Space>
        </div>
      )}

      {/*输入区域 */}
      <div className={styles.inputContainer}>
        <div className={styles.inputWrapper}>
          {/* 文本输入框 */}
          <TextArea
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder={isCustomerService ? "输入回复内容..." : "输入您的问题..."}
            autoSize={{ minRows: 1, maxRows: 4 }}
            className={styles.messageInput}
          />
          {/* 表情按钮 */}
          <Tooltip title="选择表情">
            <Button
              type="default"
              icon={<SmileOutlined />}
              onClick={() => setShowEmojiPicker(!showEmojiPicker)}
              className={styles.emojiButton}
            />
          </Tooltip>
          {/* 图片选择按钮 */}
          <Tooltip title="选择图片">
            <Button
              type="default"
              icon={<PictureOutlined />}
              onClick={() => fileInputRef.current?.click()}
              className={styles.imageButton}
            />
          </Tooltip>
          {/* 语音录制按钮 */}
          {enableVoice && (
            <Tooltip title={isRecordingAudio ? "停止录音" : "开始录音"}>
              <Button
                type={isRecordingAudio ? "primary" : "default"}
                danger={isRecordingAudio}
                icon={isRecordingAudio ? <StopOutlined /> : <AudioOutlined />}
                onClick={isRecordingAudio ? stopAudioRecording : startAudioRecording}
                className={styles.voiceRecordButton}
              />
            </Tooltip>
          )}
          {/* 发送按钮 */}
          <Button
            type="primary"
            icon={<SendOutlined />}
            onClick={sendMessage}
            loading={loading}
            disabled={!inputValue.trim()}
            className={styles.sendButton}
          >
            发送
          </Button>
        </div>
        {/* 表情选择器 */}
        <EmojiPicker />
        
        {/* 图片预览区域 */}
        {selectedImages.length > 0 && (
          <div className={styles.imagePreviewContainer}>
            <div className={styles.imagePreviewHeader}>
              <Text strong>已选择 {selectedImages.length} 张图片</Text>
              <Space>
                <Button 
                  size="small" 
                  type="primary" 
                  onClick={sendAllImages}
                >
                  发送全部
                </Button>
                <Button 
                  size="small" 
                  onClick={() => setSelectedImages([])}
                >
                  清空
                </Button>
              </Space>
            </div>
            <div className={styles.imagePreviewGrid}>
              {selectedImages.map((file, index) => (
                <div key={index} className={styles.imagePreviewItem}>
                  <img 
                    src={URL.createObjectURL(file)} 
                    alt={`预览 ${index + 1}`}
                    className={styles.imagePreview}
                    onClick={() => previewImage(URL.createObjectURL(file))}
                  />
                  <Button
                    type="text"
                    size="small"
                    icon={<DeleteOutlined />}
                    onClick={() => removeSelectedImage(index)}
                    className={styles.removeImageButton}
                  />
                </div>
              ))}
            </div>
          </div>
        )}
        
        {/* 隐藏的文件输入 */}
        <input
          ref={fileInputRef}
          type="file"
          multiple
          accept="image/*"
          onChange={handleImageSelect}
          style={{ display: 'none' }}
        />
        
      </div>
      
      {/* 图片预览模态框 */}
      <Modal
        title="图片预览"
        open={imagePreviewVisible}
        onCancel={() => setImagePreviewVisible(false)}
        footer={null}
        width="80%"
        centered
      >
        <div style={{ textAlign: 'center' }}>
          <img 
            src={imagePreviewUrl} 
            alt="图片预览" 
            style={{ maxWidth: '100%', maxHeight: '70vh', objectFit: 'contain' }}
          />
        </div>
      </Modal>
    </div>
  );
};

export default MyCustomer;
